import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { List, Card, Radio, Tag, Pagination, Space, Typography } from 'antd';

const { Title, Paragraph } = Typography;

/**
 * 我的文章页面
 * 以列表形式展示个人文章，支持分类筛选和分页。
 */
const ArticlesPage = () => {
  // 文章数据
  const articles = [
    {
      id: 1,
      title: "初探 React Hooks",
      description: "深入理解 useState、useEffect 等核心 Hooks 的使用方法和最佳实践。",
      date: "2024-03-15",
      category: "技术分享"
    },
    {
      id: 2,
      title: "一次难忘的徒步旅行",
      description: "记录了上周末在山间徒步的所见所闻，以及对自然的感悟。",
      date: "2024-03-22",
      category: "生活随笔"
    },
    {
      id: 3,
      title: "JavaScript 异步编程总结",
      description: "从回调函数到 Promise，再到 Async/Await，全面梳理 JS 异步方案。",
      date: "2024-04-01",
      category: "技术分享"
    },
    {
      id: 4,
      title: "我最爱的十部电影",
      description: "分享十部对我影响深远的电影，以及它们带给我的思考。",
      date: "2024-04-10",
      category: "生活随笔"
    },
    {
      id: 5,
      title: "如何高效学习一门新技术",
      description: "结合自身经验，探讨如何快速上手并掌握一门新的编程技术或框架。",
      date: "2024-04-25",
      category: "技术分享"
    }
  ];

  // 状态管理
  const [filter, setFilter] = useState('all'); // 'all', '技术分享', '生活随笔'
  const [currentPage, setCurrentPage] = useState(1);
  const pageSize = 3;

  // 根据筛选条件过滤列表
  const filteredItems = filter === 'all' 
    ? articles 
    : articles.filter(item => item.category === filter);
    
  // 根据分页显示当前页的数据
  const paginatedItems = filteredItems.slice(
    (currentPage - 1) * pageSize,
    currentPage * pageSize
  );

  return (
    <div className="bg-gray-50 py-8 px-4 sm:px-6 lg:px-8">
      <div className="container mx-auto">
        {/* 页面标题 */}
        <Title level={2} style={{ marginBottom: '32px', textAlign: 'center' }}>
          我的文章
        </Title>
        
        {/* 筛选栏 */}
        <Card style={{ marginBottom: '24px' }}>
          <Radio.Group 
            value={filter} 
            onChange={(e) => {
              setFilter(e.target.value);
              setCurrentPage(1); // 切换筛选时重置到第一页
            }}
          >
            <Radio.Button value="all">全部</Radio.Button>
            <Radio.Button value="技术分享">技术分享</Radio.Button>
            <Radio.Button value="生活随笔">生活随笔</Radio.Button>
          </Radio.Group>
        </Card>
        
        {/* 列表区域 */}
        <List
          grid={{
            gutter: 16,
            xs: 1,
            sm: 1,
            md: 1,
            lg: 1,
            xl: 1,
            xxl: 1,
          }}
          dataSource={paginatedItems}
          renderItem={item => (
            <List.Item>
              <Card hoverable>
                <List.Item.Meta
                  avatar={
                    <div className={`w-12 h-12 rounded-lg flex items-center justify-center bg-gradient-custom-${item.id % 3 + 1} text-white font-bold text-xl`}>
                      {item.title.charAt(0)}
                    </div>
                  }
                  title={<Link to={`/life?id=${item.id}`} style={{ fontSize: '16px' }}>{item.title}</Link>}
                  description={
                    <Paragraph type="secondary" ellipsis={{ rows: 2 }}>
                      {item.description}
                    </Paragraph>
                  }
                />
                <div style={{ marginTop: '16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <Space>
                    <Tag>{item.date}</Tag>
                    <Tag color={item.category === '技术分享' ? 'blue' : 'green'}>{item.category}</Tag>
                  </Space>
                  <Link to={`/life?id=${item.id}`}>查看全文 &rarr;</Link>
                </div>
              </Card>
            </List.Item>
          )}
        />
        
        {/* 分页 */}
        <div style={{ marginTop: '24px', textAlign: 'center' }}>
          <Pagination
            current={currentPage}
            pageSize={pageSize}
            total={filteredItems.length}
            onChange={(page) => setCurrentPage(page)}
            showSizeChanger={false}
          />
        </div>
      </div>
    </div>
  );
};

export default ArticlesPage; 